﻿@{
    ViewBag.Title = "资料收集";
    var id = Model != null ? Model.ID : 0;
}
@using ZBJF.Warranty.Common.Enums.InsuranceWarranty
@using ZBJF.Warranty.WebProvider
@model ZBJF.Warranty.Model.InsuranceWarrantyRecord

<style type="text/css">
    #tbInsuranceWarrantyRecordImages input[type=text] {
        width: 90%;
    }
</style>
@using (Html.BeginForm("SaveIWRImages", "InsuranceWarrantyRecord", FormMethod.Post, new { id = "mvcForm", name = "mvcForm", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.ID)
    @Html.HiddenFor(m => m.WarrantyRecordNo)
    @Html.HiddenFor(m => m.CreateTime)
    @Html.HiddenFor(m => m.Reporter)
    @Html.HiddenFor(m => m.ReporterPhone)

    <ul id="myTab" class="nav nav-tabs">
        @{
            var imageList = Model.InsuranceWarrantyRecordImages.ToList();
            var imageTypeList = new List<int>();
            for (int i = 0; i < imageList.Count; i++)
            {
                var image = imageList[i];
                if (!imageTypeList.Contains(image.ImageType))
                {
                    <li class="@(i == 0 ? "active" : "")">
                        <a href="#@image.ImageType" data-toggle="tab">
                            @ZBJF.Warranty.Common.Common.EnumHelper.Instance.GetDescription(typeof (WarrantyRecordImageEnums), image.ImageType)
                        </a>
                    </li>
                }
                imageTypeList.Add(image.ImageType);
            }
        }
    </ul>
    
    <div id="myTabContent" class="tab-content">
        @{
            imageTypeList = new List<int>();
            for (int i = 0; i < imageList.Count; i++)
            {
                var image = imageList[i];
                if (!imageTypeList.Contains(image.ImageType))
                {
                    <div class="tab-pane padding-10 fade in @(i == 0 ? "active" : "")" id="@image.ImageType">
                        <table id="tb_@image.ImageType" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>
                                        图片类别
                                    </th>
                                    @*<th>大小</th>*@
                                    <th>上传人</th>
                                    <th>上传时间</th>
                                    <th>点击查看</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>@ZBJF.Warranty.Common.Common.EnumHelper.Instance.GetDescription(typeof(WarrantyRecordImageEnums), image.ImageType)</td>
                                    @*<td>@(int.Parse(image.FileSize) / 1024 + "KB")</td>*@
                                    <td>@image.CreateBy</td>
                                    <td>@image.CreateTime</td>
                                    <td><a target="_blank" href="@image.FilePath">@image.FileName</a></td>
                                    <td>
                                        <a href="javascript:void(0)" onclick="deleteImage(@image.ID)">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                }
                else
                {
                    <script>
                        $(function () {
                            var html = "<tr><td>@ZBJF.Warranty.Common.Common.EnumHelper.Instance.GetDescription(typeof(WarrantyRecordImageEnums), image.ImageType)</td><td>@image.CreateBy</td><td>@image.CreateTime</td><td><a target='_blank' href='@image.FilePath''>@image.FileName</a></td><td><a href='javascript:void(0)' onclick='deleteImage(@image.ID)'>删除</a></td></tr>";
                            $("#tb_@image.ImageType tbody").append(html);
                        });
                    </script>
                }
                imageTypeList.Add(image.ImageType);
            }
        }
    </div>

    if (ViewBag.ParentStatus !=  (byte)InsuranceWarrantyStatus.Processed && Model.Status != (byte)InsuranceWarrantyStatus.RetrurnVisited)
    {
        <table class="table table-striped table-bordered table-hover" id="tbInsuranceWarrantyRecordImages">
            <thead>
                <tr>
                    <th colspan="2">
                        待添加的图片（可添加多次）
                    </th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td class="w120">
                        @Html.DropDownListFor(m => m.InsuranceWarrantyRecordImages, ConvertToSelector.Instance.EnumTypeConvertToSelectList(typeof(WarrantyRecordImageEnums)), new { validate = "{required:true,messages:{required:'请选择图片类型'}}" })
                    </td>
                    <td>
                        <span class="showFileName"></span>
                        <a href="javascript:;" class="file margin-l-10">
                            <input type="file" id="ImageType" name="ImageType" multiple="multiple" />选择图片
                        </a>
                        <input type="submit" class="btn btn-primary Edit-R margin-l-10" id="uploadBtn" value="上传" />
                    </td>
                </tr>
            </tfoot>
        </table>
    }
}

@section scripts{
    <script src="~/Scripts/uploadAdapter/jquery.loadscript.js"></script>
    <script src="~/Scripts/uploadAdapter/jquery.uploadAdapter.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".file").on("change", "input[type='file']", function () {
                var filePath = "";
                //多文件上传简单处理，对于支持HTML5的可以多文件上传，不支持H5的只能单个上传
                if (window.File && window.FileList) {
                    var fileList = document.getElementById("mvcForm")["ImageType"].files;
                    for (var i = 0; i < fileList.length; i++) {
                        filePath += fileList[i].name + "</br>";
                    }
                } else {
                     filePath = $(this).val();
                }
                if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {
                    var arr = filePath.split('\\');
                    var fileName = arr[arr.length - 1];
                    $(".showFileName").html(fileName);
                } else {
                    $(".showFileName").html("请选择jpg或png格式的图片");
                    return;
                }
            });

            $("#mvcForm").submit(function() {
                if ($("#mvcForm").valid()) {
                    var uploadFileName = $(".showFileName").text();
                    if (!uploadFileName || uploadFileName == "") {
                        layer.alert("请选择要上传的图片！");
                        return false;
                    }
                    return validateImageType();
                }
                return false;
            });
        });

        function validateImageType() {
            var insuranceWarrantyRecordImages = $("#InsuranceWarrantyRecordImages").val();
            if (insuranceWarrantyRecordImages == "") {
                layer.alert("请先选择图片类型");
                return false;
            } else {
                document.getElementById("uploadBtn").disabled = 'disabled';
                return true;
            }
        }

        function deleteImage(id) {
            layer.confirm("确认要删除吗？", {
                icon: 3,
                title: '',
                btn: ['确认', '取消']
            }, function(index) {
                //do somethin
                $.ajax({
                    type: "post",
                    data: { id: id },
                    url: "/InsuranceWarrantyRecord/DeleteIWRImage",
                    success: function(result) {
                        layer.msg(result.message);
                        location.reload();
                    },
                    error: function(error) {
                        console.log(error.responseText);
                    }
                });
                layer.close(index);
            });
        }
    </script>
}
